<template>
  <div>
    <h2> 当前和： ...{{ sum }}--{{sname}}</h2>
    <h2> 放大后结果 ： ...{{  bigSum }}</h2>
    <select v-model="num">
      <!--      [value=$]{$}*3 -->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(-num)">-</button>
    <button @click="oddincrement">奇数再加</button>
    <button @click="waitincrement">过会再加</button>
  </div>
</template>

<script>
/*mapState 实际上把对象中的值
变成了一个简化的访问方法
  返回配置内容的方法
*/
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
import {mapMutations} from 'vuex'
import {mapActions} from 'vuex'

export default {
  name: "Count",
  data() {
    return {
      num: 1
    }
  },
  methods:{
    // increment(){
    //  this.$store.dispatch('add',this.num)
    // },
    // decrement(){
    //   this.$store.dispatch('add',-this.num)
    // },

    ...mapActions({increment:'add'}),
    //这里生成的方法，不能生成参数，在使用时，手动写上即可
    ...mapMutations({ decrement:'ADD'}),
    oddincrement(){
      if( this.$store.state.sum %2  )
        this.$store.dispatch('add',this.num)
    },
    waitincrement(){
      setTimeout(()=>{
        this.$store.dispatch('add',this.num)
      },1000)
    }
  },
  computed:{
     // ...mapState({sum:'sum'})
    /*因为简写时常常省略''所以属性名sum实际上是'sum'，
      但是值，会引用对象，下面这样写才可以省略*/
    ...mapState(['sum','sname']),
    //解决计算属性的问题
    ...mapGetters(['bigSum'])
  }
}
</script>

<style scoped>
  button{margin:5px}
</style>
